<!-- 
  我的 -> 历史查询 -> 测试记录
 -->

<template>
  <view class="page-root">
    <view class="charts-wrap">
      <qiun-data-charts background="rgba(255,255,255,0)" type="area" :opts="chartOptions" :chartData="chartData" ontouch canvas2d canvasId="testRecord" />
    </view>

    <view class="list-item" v-for="(item, index) in dataList" :key="index">
      <view class="list-name">
        <text>{{ item.title }}</text>
        <text>：</text>
      </view>
      <view class="list-content">
        <text v-if="lang">100 meter acceleration time: </text>
        <text v-else>零百加速时间：</text>
        <text>{{ item.hundredTime }}</text>
      </view>
      <view class="list-content">
        <text v-if="lang">Max speed: </text>
        <text v-else>最高速度：</text>
        <text>{{ item.maxSpeed }}</text>
      </view>
      <view class="list-content">
        <text v-if="lang">Ride distance: </text>
        <text v-else>骑行距离：</text>
        <text>{{ item.rideDistance }}</text>
      </view>
      <view class="list-content">
        <text v-if="lang">Ride time: </text>
        <text v-else>骑行时间：</text>
        <text>{{ item.rideTime }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      lang: 0, // 0=中文 1=英文

      dataList: [],

      chartOptions: {
        // 主题颜色，16进制颜色格式
        // color: [
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        //   "#4F7AFD",
        // ],
        // 画布填充边距，顺序为上右下左，例如[10,15,25,15]
        padding: [30, 30, 10, 10],
        // 开启滚动条，X轴配置里需要配置itemCount单屏幕数据点数量
        enableScroll: true,
        fontSize: 12,
        fontColor: "#FFFFFF",
        // 是否显示图表区域内数据点上方的数据文案
        dataLabel: false,
        // 是否显示数据点的图形标识
        dataPointShape: false,
        // 图例配置
        legend: {
          // 是否显示图例标识
          show: false,
        },
        xAxis: {
          // 不绘制纵向网格(即默认绘制网格)
          disableGrid: true,
          // 数据点（刻度点）字体颜色
          fontColor: "#FFFFFF",
          // 是否显示滚动条，配合拖拽滚动使用（即仅在启用【基本配置】的 enableScroll 时有效）
          scrollShow: true,
          // 单屏数据密度即图表可视区域内显示的X轴数据点数量，仅在启用enableScroll时有效
          itemCount: 7,
          // X轴标题文本
          title: "(s)",
          titleFontColor: "#FFFFFF",
          titleOffsetX: 4,
        },
        yAxis: {
          // 不绘制横向向网格(即默认绘制网格)
          disableGrid: true,
          // 不绘制Y轴标题
          showTitle: true,
          data: [
            {
              // 当前Y轴标题（需要上面showTitle设置为true）
              title: "(km/h)",
              titleFontColor: "#FFFFFF",
              titleOffsetY: -10,
            },
          ],
        },
        extra: {
          // 区域图
          area: {
            // 区域图类型，可选值："straight"尖角折线模式,"curve"曲线圆滑模式,"step"时序图模式
            type: "curve",
            // 区域图透明度
            opacity: 0.2,
            // 是否叠加相应的折线
            addLine: true,
            // 叠加的折线宽度
            width: 2,
            // 是否开启区域图渐变色
            gradient: true,
            // 激活指示点类型，可选值："none"不启用激活指示点,"hollow"空心点模式,"solid"实心点模式
            activeType: "none",
          },
          // 提示窗配置
          tooltip: {
            // 提示窗口的四角圆弧半径
            borderRadius: 2,
            // 提示窗口的边框颜色透明度
            borderOpacity: 0,
            // 提示窗口的背景颜色
            bgColor: "#FFFFFF",
            // 提示窗口的背景颜色透明度
            bgOpacity: 0.2,
          },
        },
      },
      chartData: {},
    };
  },
  onLoad(options) {
    setTimeout(() => {
      this.dataList = options.idList.split(",").map((id, index) => {
        const obj = {
          id,
          title: "速度测试" + (index + 1),
          hundredTime: "20s",
          maxSpeed: "130km/h",
          rideDistance: "300m",
          rideTime: "35s",
        };
        return obj;
      });

      let res = {
        categories: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50],
        series: [
          {
            name: "速度测试1",
            data: [35, 8, 25, 37, 4, 20, 35, 8, 25, 37],
          },
          {
            name: "速度测试2",
            data: [70, 40, 65, 100, 44, 6, 70, 40, 65, 100],
          },
          {
            name: "速度测试3",
            data: [100, 80, 95, 150, 112, 132, 100, 80, 95, 150],
          },
          {
            name: "速度测试4",
            data: [20, 30, 90, 50, 35, 15, 25, 60, 65, 87],
          },
        ],
      };
      this.chartData = JSON.parse(JSON.stringify(res));
    }, 500);
  },
  onShow() {
    this.lang = uni.getStorageSync("lang");
    if (this.lang) {
      uni.setNavigationBarTitle({ title: "Test records" });
    } else {
      uni.setNavigationBarTitle({ title: "测试记录" });
    }
  },
  methods: {},
};
</script>

<style>
page {
  background: #19253e;
}
</style>

<style lang="scss" scoped>
.page-root {
  padding-bottom: 20rpx;
  color: #fff;
}

// 图表
.charts-wrap {
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10rpx;
  margin: 20rpx 30rpx 0;
  height: 614rpx;
}

.list-item {
  display: flex;
  flex-wrap: wrap;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 10rpx;
  padding: 30rpx 20rpx;
  margin: 20rpx 30rpx 0;
}
.list-name {
  width: 100%;
  margin-bottom: 10rpx;
  font-size: 32rpx;
}
.list-content {
  margin-top: 20rpx;
  width: 50%;
  box-sizing: border-box;
  padding-right: 20rpx;
  color: rgba(255, 255, 255, 0.8);
}
</style>
